<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>6.0 class bind</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: blue;
        }
        .text-danger{
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用v-bind来设置样式属性-->
    <div v-bind:class="{ 'active': isActive }"></div>
    <hr>
    <!--使用v-bind来设置多个样式属性-->
    <div v-bind:class="{ 'active':isActive,'text-danger':hasError}"></div>
    <hr>
    <!--直接绑定一个对象-->
    <div v-bind:class="classObj"></div>
    <hr>
    <!--绑定返回对象的计算属性-->
    <div v-bind:class="classObjComputed" ></div>
    <hr>
    <!--绑定一个数组-->
    <div v-bind:class="[activeClass,errorClass]"></div>
    <hr>
    <!--使用表达式-->
    <div v-bind:class="[activeClass,hasError?'':errorClass]"></div>
    <hr>
    <!--使用v-bind:style直接设置样式-->
    <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">LFSenior</div>
    <!--直接绑定样式对象-->
    <div v-bind:style="styleObj">LFSenior</div>
    <!--注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。-->
    <!--绑定数组-->
    <div v-bind:style="[baseStyles,overridingStyle]">LFSenior</div>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isActive:true,
            hasError:true,
            classObj:{ 'active':true,'text-danger':true},
            activeClass:'active',
            errorClass:'text-danger',
            activeColor:'red',
            fontSize:22,
            styleObj:{
                color:'blue',
                fontSize:'26px'
            },
            baseStyles:{
                color:'green',
                fontSize:'30px'
            },
            overridingStyle:{
                'font-weight':'bold'
            }
        },
        computed:{
            classObjComputed:function () {
                return { 'active':true,'text-danger':false};
            }
        }
    });
</script>
</html>